<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-3">
                <div class="media">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-checkbox-circle-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5 @click="tolog1">Free Shipping</h5>
                    <p class="text-muted mb-0">Sed ut perspiciatis unde</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-exchange-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>Easy Return</h5>
                    <p class="text-muted mb-0">Neque porro quisquam est</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-money-dollar-circle-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>Cash on Delivery</h5>
                    <p class="text-muted mb-0">Ut enim ad minima quis</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-money-dollar-circle-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>Cash on Delivery</h5>
                    <p class="text-muted mb-0">Ut enim ad minima quis</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <div class="card" style="padding-top: 20px; padding-bottom: 20px">
      <div class="row col-md-12" style="justify-content: space-between">
        <div class="col-md-3" style="max-width: 22%">
          <div class="form-group row">
            <label class="col-md-3 col-form-label col-offset-1">应用类型</label>
            <div class="col-md-8">
              <select class="form-control .col-md-offset-2">
                <option>采集日志</option>
                <option>标签日志</option>
                <option>处理日志</option>
                <option>存储日志</option>
                <option>接口日志</option>
                <option>证券</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-3" style="max-width: 22%">
          <div class="form-group row">
            <label class="col-md-3 col-form-label">应用环境</label>
            <div class="col-md-9">
              <select class="form-control">
                <option>正式</option>
                <option>测试</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-3" style="max-width: 22%">
          <div class="form-group row">
            <label class="col-md-3 col-form-label">日志等级</label>
            <div class="col-md-9">
              <select class="form-control">
                <option>信息</option>
                <option>警告</option>
                <option>错误</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-3" style="max-width: 22%">
          <div class="form-group row">
            <div class="col-md-12">
              <b-form-group
                id="example-date-time"
                label-cols-sm="3"
                label-cols-lg="3"
                label="日期范围"
                label-for="date-time"
              >
                <b-form-input
                  id="date-time"
                  value="2019-08-19T13:45:00"
                  type="datetime-local"
                ></b-form-input>
              </b-form-group>
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12" style="justify-content: space-between">
        <div class="col-md-4" style="max-width: 32%">
          <div class="form-group row">
            <label class="col-md-2 col-form-label">时间范围</label>
            <div class="col-md-10">
              <select class="form-control">
                <option>15分钟内</option>
                <option>30分钟内</option>
                <option>1小时内</option>
                <option>24小时内</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-4" style="max-width: 32%">
          <div class="form-group row">
            <div class="col-md-12">
              <b-form-group
                id="example text"
                label-cols-sm="2"
                label-cols-lg="2"
                label="类名路径"
                label-for="text"
              >
                <b-form-input for="text" value=""></b-form-input>
              </b-form-group>
            </div>
          </div>
        </div>
        <div class="col-md-4" style="max-width: 32%">
          <div class="form-group row">
            <div class="col-md-12">
              <b-form-group
                id="example text"
                label-cols-sm="2"
                label-cols-lg="2"
                label="服务器名称"
                label-for="text"
              >
                <b-form-input for="text" value=""></b-form-input>
              </b-form-group>
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12">
        <div class="col-md-12">
          <div class="form-group row">
            <div class="col-md-12">
              <b-form-group
                id="example text"
                label-cols-sm="1"
                label-cols-lg="1"
                label="日志内容"
                label-for="text"
                class="rizhineirong"
              >
                <b-form-input for="text" value=""></b-form-input>
              </b-form-group>
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12" style="margin-left: 0px">
        <b-button variant="primary" style="margin-right: 10px"> 搜索 </b-button>
        <b-button variant="light"> 重置 </b-button>
      </div>
    </div>
    <transaction></transaction>
  </Layout>
</template>

<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import transaction from "./transaction";
export default {
  data() {
    return {
      title: "采集日志",
    };
  },
  components: {
    Layout,
    PageHeader,
    transaction,
  },
  methods:{
    tolog1(){
      // this.$router.push({name:'log'})
    }
  }
};
</script>

<style>
</style>
